<script setup lang="ts">
defineOptions({
  name: "FULLSCREEN_ELECTRICTITY_OPERATION_OVERVIEW"
});
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import fullScreen from "@/assets/svg/common/fullScreen.svg?component";
import safeDays from "./components/safeDays.vue";
import { useFullscreen, useTransition, TransitionPresets } from "@vueuse/core";
import { getSafeDays, updateSafeDays } from "@/api/modules/operation";
import CUSSystem from "@/views/machine/components/CUSSystem.vue";
import RoomTemp from "@/views/machine/components/RoomTemp.vue";
import MachineAdvocacy from "@/views/machine/components/MachineAdvocacy.vue";
import ClearRoom from "@/views/machine/components/ClearRoom.vue";
import ExhausetPressure from "@/views/machine/components/ExhausetPressure.vue";
import MachineEqpStatus from "@/views/machine/components/MachineEqpStatus.vue";
import MachineTodayTask from "@/views/machine/components/MachineTodayTask.vue";
import MachineTodayWarning from "@/views/machine/components/MachineTodayWarning.vue";
import topBoard from "@/views/common/topBoard/index.vue";
import MachineHotWater from "@/views/machine/components/MachineHotWater.vue";
import PVSystem from "@/views/machine/components/PVSystem.vue";
import PCWSystem from "@/views/machine/components/PCWSystem.vue";
import MachineNg from "@/views/machine/components/MachineNg.vue";
import waterOverview from "@/views/machine/operation/overView/components/waterOverview.vue";
import gasoverview from "@/views/machine/operation/overView/components/gasoverview.vue";
import dayjs from "dayjs";
const { isFullscreen, toggle } = useFullscreen();
const clock = ref<string>("");
const isShowSafeDays = ref<boolean>(false);
const operationDays = ref<number>(0);
const clickTimer = ref<any>(null);
const operationDaysVal = useTransition(operationDays, {
  duration: 1000,
  transition: TransitionPresets.easeInOutExpo
});

const updateKey1 = ref(Date.now());
const updateKey2 = ref(Date.now());
const updateKey3 = ref(Date.now());
const updateKey4 = ref(Date.now());
const updateKey5 = ref(Date.now());
const updateKey6 = ref(Date.now());
const updateKey7 = ref(Date.now());
const updateKey8 = ref(Date.now());
const updateKey9 = ref(Date.now());
const updateKey10 = ref(Date.now());
const updateKey11 = ref(Date.now());
const updateKey12 = ref(Date.now());
const updateKey13 = ref(Date.now());
const updateKey14 = ref(Date.now());

const toFullScreen = () => {
  toggle();
};

// 轮询时间间隔
const carouselDelay = 30000;
const carouselTimer = ref<any>(null);
const screenType = ref<Array<boolean>>([true, false, false, false, false]);
const initLoop = async () => {
  const title = "平台概览（机械科运维）";
  document.title = title;
  startClock();
  startCarousel();
  await getSafeDaysFn();
};

const init = () => {
  updateKey1.value = Date.now();
  updateKey2.value = Date.now();
  updateKey3.value = Date.now();
  if (screenType.value[0]) {
    updateKey4.value = Date.now();
    updateKey5.value = Date.now();
  }
  if (screenType.value[1]) {
    updateKey6.value = Date.now();
    updateKey7.value = Date.now();
    updateKey8.value = Date.now();
  }
  if (screenType.value[2]) {
    updateKey9.value = Date.now();
    updateKey10.value = Date.now();
    updateKey11.value = Date.now();
  }
  if (screenType.value[3]) {
    updateKey12.value = Date.now();
    updateKey13.value = Date.now();
  }
  if (screenType.value[4]) {
    updateKey14.value = Date.now();
  }
};

const startCarousel = () => {
  clearCarousel();
  carouselTimer.value = setInterval(async () => {
    const index: number = screenType.value.findIndex(item => item);
    screenType.value = screenType.value.map((item, ind, arr) => {
      let nextIndex = null;
      if (index + 1 < arr.length) {
        nextIndex = index + 1;
      } else {
        nextIndex = arr.length - index - 1;
      }
      return nextIndex === ind;
    });
    await nextTick();
    init();
  }, carouselDelay);
};

const clearClock = () => {
  clearInterval(clickTimer.value);
};

const clearCarousel = () => {
  clearInterval(carouselTimer.value);
};

const getSafeDaysFn = async () => {
  const res = await getSafeDays(2);
  if (!res) return;
  const { num } = res;
  operationDays.value = num;
};
const startClock = () => {
  clearClock();
  clickTimer.value = setInterval(async () => {
    clock.value = dayjs().format("YYYY/MM/DD HH:mm:ss");
    const hour = dayjs().get("hour");
    const minute = dayjs().get("minute");
    const second = dayjs().get("second");
    if (hour === 23 && minute === 59 && second === 59) {
      operationDays.value += 1;
      const id = 2;
      const params = { id, num: operationDays.value };
      await updateSafeDays(params);
    }
  }, 1000);
};

onMounted(async () => {
  await initLoop();
  init();
});

onUnmounted(() => {
  clearClock();
  clearCarousel();
});
</script>

<template>
  <div style="position: relative; width: 100%; height: 100%">
    <div class="gas-overview" :class="{ 'gas-overview-auto': screenType[3] }">
      <div class="gas-overview-item one">
        <div class="one-item">{{ clock }}</div>
        <div class="one-item one-middle">机械科运维平台概览</div>
        <div class="one-item one-right">
          <div class="one-days" @click="isShowSafeDays = true">安全运行天数：{{ Math.round(operationDaysVal) }}天</div>
        </div>
      </div>

      <div class="gas-overview-item five">
        <topBoard ref="topBoardRef" :key="updateKey3" class-code="MACHINE" :height="234" dark />
      </div>

      <div v-if="screenType[0]" class="gas-overview-item five" style="position: relative">
        <ClearRoom :key="updateKey4" dark />
      </div>

      <div v-if="screenType[0]" class="gas-overview-item six" style="position: relative">
        <ExhausetPressure :key="updateKey5" dark />
      </div>

      <div v-if="screenType[1]" class="gas-overview-item waterValue1" style="position: relative">
        <PCWSystem :key="updateKey6" dark />
      </div>

      <div v-if="screenType[1]" class="gas-overview-item waterValue4" style="position: relative">
        <PVSystem :key="updateKey7" dark />
      </div>

      <div v-if="screenType[1]" class="gas-overview-item five" style="position: relative">
        <CUSSystem :key="updateKey8" dark />
      </div>
      <div v-if="screenType[2]" class="gas-overview-item waterValue7" style="position: relative">
        <RoomTemp :key="updateKey9" dark />
      </div>
      <div v-if="screenType[2]" class="gas-overview-item waterValue8" style="position: relative">
        <MachineAdvocacy :key="updateKey10" dark />
      </div>

      <div v-if="screenType[2]" class="gas-overview-item five" style="position: relative">
        <gasoverview :key="updateKey11" dark />
      </div>
      <div v-if="screenType[3]" class="gas-overview-item five" style="position: relative">
        <waterOverview :key="updateKey12" dark />
      </div>
      <!-- <div v-if="screenType[3]" class="five" /> -->
      <div v-if="screenType[3]" class="gas-overview-item five" style="position: relative">
        <MachineHotWater :key="updateKey13" dark />
      </div>
      <div v-if="screenType[4]" class="gas-overview-item five" style="position: relative">
        <MachineNg :key="updateKey14" dark />
      </div>
      <div v-if="screenType[4]" class="five" />
      <!-- <div v-if="screenType[2]" class="five"></div> -->

      <div v-if="!isFullscreen" class="full-screen">
        <fullScreen class="icon" @click="toFullScreen" />
      </div>
      <safeDays v-if="isShowSafeDays" v-model="operationDays" v-model:visible="isShowSafeDays" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gas-overview {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(24, minmax(16px, 1fr));
  grid-auto-rows: 66px 234px minmax(16px, 5fr) minmax(16px, 5fr);
  grid-auto-flow: column dense;
  grid-gap: 16px;
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow: hidden;
  background-color: #001e3bff;

  .full-screen {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background-color: var(--px-color-primary-light-9);
    border-radius: 4px;
    box-shadow: 0 0 4px 0 var(--px-color-primary-light-3);

    .icon {
      width: 70%;
      height: 70%;
      color: #00c2ff;
    }

    &:hover {
      background-color: var(--px-color-primary-light-7);
      box-shadow: none;
    }
  }

  .gas-overview-item {
    display: flex;
    align-items: center;
    justify-content: center;

    .px-button {
      padding-right: 0;
    }
  }

  .one {
    box-sizing: border-box;
    display: flex;
    grid-column: 1 / 25;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background: url("@/assets/images/overview_header.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;

    .one-item {
      flex: 1;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      letter-spacing: 4px;
      background: linear-gradient(to top, #00c2ffff, #fff);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .one-middle {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }

    .one-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .one-days {
        &:hover {
          cursor: pointer;
          background: #fff;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }

  .two {
    grid-column: 1 / 7;
  }

  .three {
    grid-column: 7 / 21;
  }

  .four {
    grid-column: 21 / 25;
  }

  .five {
    grid-column: 1 / 25;
  }

  .six {
    grid-column: 1 / 25;
  }

  .seven {
    grid-column: 1 / 25;
  }

  .eight {
    grid-column: 1/25;
  }

  .waterValue1 {
    grid-column: 1/18;
  }

  .waterValue2 {
    grid-column: 6/12;
  }

  .waterValue3 {
    grid-column: 12/18;
  }

  .waterValue4 {
    grid-column: 18/25;
  }

  .waterValue7 {
    grid-column: 1/18;
  }

  .waterValue8 {
    grid-column: 18/25;
  }
}

.gas-overview-auto {
  grid-auto-rows: 66px 234px minmax(16px, auto) minmax(16px, 5fr);
}
</style>
